<!-- components/custom-form/custom-form.vue -->
<script setup>
  import {
    ref
  } from 'vue'

  // 表单数据
  const formData = ref({
    mobile: '13212345678',
    password: 'abc12345',
    alt: '关于我的描述',
  })

  // 表单验证规则
  const formRules = {
    mobile: {
      rules: [{
          required: true,
          errorMessage: '请填写手机号码'
        },
        {
          pattern: '^1\\d{10}$',
          errorMessage: '手机号码格式不正确'
        },
      ],
    },
    password: {
      rules: [{
          required: true,
          errorMessage: '请输入密码'
        },
        {
          pattern: '^[a-zA-Z0-9]{8}$',
          errorMessage: '密码格式不正确'
        },
      ],
    },
  }
  // 表单提交
  async function onFormSubmit() {
    try {
      // 执行表单的验证
      await formRef.value.validate()
    } catch (error) {
      console.log(err)
    }
  }
</script>


<!-- components/custom-form/custom-form.vue -->
<template>
  <uni-forms label-width="0" ref="formRef" :model="formData" :rules="formRules">
    <uni-forms-item name="mobile">
      <uni-easyinput type="text" :clearable="false" :input-border="false" v-model="formData.mobile"
        placeholder="请输入手机号" />
    </uni-forms-item>
    <uni-forms-item name="password">
      <uni-easyinput type="password" :clearable="false" :input-border="false" v-model="formData.password"
        placeholder="请输入密码" />
    </uni-forms-item>
    <uni-forms-item name="alt">
      <uni-easyinput type="textarea" v-model="formData.alt" :clearable="false" :input-border="false" />
    </uni-forms-item>
    <uni-forms-item>
      <label style="display: flex; align-items: center" class="radio">
        <radio color="#2cb5a5" style="transform: scale(0.7)" value="" />
        <text>我已同意用户协议及隐私协议</text>
      </label>
    </uni-forms-item>
  </uni-forms>
  <button class="uni-button" @click="onFormSubmit" type="primary">提交</button>
</template>
<style lang="scss">
  .uni-button {
    background-color: #2cb5a5;
  }

  :deep(.uni-easyinput__content-textarea) {
    padding: 5px 10px;
  }

  :deep(.uniui-eye-filled),
  :deep(.uniui-eye-slash-filled) {
    color: #c0c4cc !important;
  }
</style>